<!-- polls/templates/polls/results.html -->
{% extends "polls/base.html" %}
{% load poll_extras %}

{% block title %}{{ question.question_text }} - 结果{% endblock %}

{% block content %}
<div class="row justify-content-center animate__animated animate__fadeIn">
    <div class="col-lg-10">
        <div class="card shadow">
            <div class="card-header text-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h2 class="mb-0">投票结果: {{ question.question_text }}</h2>
                    <span class="badge bg-light text-primary fs-6">
                        <i class="bi bi-people-fill"></i> 总票数: {{ question.total_votes }}
                    </span>
                </div>
            </div>
            
            <div class="card-body">
                <!-- 图表区域 -->
                <div class="row mb-4">
                    <div class="col-md-7">
                        <div class="chart-container">
                            <canvas id="resultsChart"></canvas>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="d-flex flex-column h-100">
                            <div class="mb-4">
                                <h5 class="text-center mb-3">投票分布</h5>
                                
                                <div class="text-center text-muted small">
                                    点击进度条查看各选项占比
                                </div>
                            </div>
                            
                            <div class="mt-auto">
                                <h5 class="text-center mb-3">统计信息</h5>
                                <div class="row text-center">
                                    <div class="col-6 mb-3">
                                        <div class="card border-0 bg-light">
                                            <div class="card-body py-2">
                                                <h6 class="card-subtitle mb-1 text-muted">选项数量</h6>
                                                <p class="card-text fs-4 fw-bold text-primary">
                                                    {{ question.choice_set.count }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <div class="card border-0 bg-light">
                                            <div class="card-body py-2">
                                                <h6 class="card-subtitle mb-1 text-muted">参与人数</h6>
                                                <p class="card-text fs-4 fw-bold text-success">
                                                    {{ question.total_votes }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 详细结果表格 -->
                <div class="table-responsive mb-4">
                    <table class="table table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th scope="col" style="width: 50%">选项</th>
                                <th scope="col" class="text-center">票数</th>
                                <th scope="col" class="text-center">百分比</th>
                                <th scope="col" class="text-center">趋势</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for choice in question.choice_set.all %}
                            {% widthratio choice.votes question.total_votes 100 as percentage %}
                            <tr>
                                <td>{{ choice.choice_text }}</td>
                                <td class="text-center fw-bold">{{ choice.votes }}</td>
                                <td class="text-center">{{ percentage|floatformat:1 }}%</td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="progress flex-grow-1" style="height: 8px;">
                                       
                                        </div>
                                        <small class="ms-2 text-muted">{{ percentage|floatformat:1 }}%</small>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <!-- 操作按钮 -->
                <div class="d-flex justify-content-between">
                    <a href="{% url 'polls:detail' question.id %}" class="btn btn-primary">
                        <i class="bi bi-arrow-repeat me-2"></i>重新投票
                    </a>
                    <a href="{% url 'polls:index' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-list-ul me-2"></i>返回投票列表
                    </a>
                </div>
            </div>
            
            <div class="card-footer text-muted">
                <div class="d-flex justify-content-between align-items-center">
                    <small>
                        <i class="bi bi-calendar-event me-1"></i>
                        {{ question.pub_date|date:"Y年m月d日 H:i" }} 发布
                        {% if question.end_date %}
                        - {{ question.end_date|date:"Y年m月d日 H:i" }} 结束
                        {% endif %}
                    </small>
                    {% if user.is_staff %}
                    <a href="{% url 'admin:polls_question_change' question.id %}" 
                       class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-pencil-square"></i> 编辑投票
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 启用工具提示
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // 获取数据
    fetch("{% url 'polls:results_data' question.id %}")
        .then(response => response.json())
        .then(data => {
            // 主图表
            const ctx = document.getElementById('resultsChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: data.labels,
                    datasets: [{
                        data: data.data,
                        backgroundColor: data.colors,
                        borderColor: '#fff',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                boxWidth: 12,
                                padding: 20,
                                font: {
                                    size: 12
                                }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = Math.round((value / total) * 100);
                                    return `${label}: ${value} 票 (${percentage}%)`;
                                }
                            }
                        }
                    },
                    cutout: '65%',
                    animation: {
                        animateScale: true,
                        animateRotate: true
                    }
                }
            });
        });
});
</script>
{% endblock %}
{% endblock %}